<template>
    <div class="user">
        <h3 style="font-size:18px;font-weight: bold">用户信息表</h3>
        <el-button type="primary" plain @click="select">查询</el-button>
        <el-table
          :data="tableData"
          style="width: 80%"
          max-height="250">
            <el-table-column
            fixed
            prop="uid"
            label="用户ID"
            width="150">
            </el-table-column>
            <el-table-column
            prop="user_name"
            label="姓名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="uname"
            label="昵称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="uphone"
            label="手机号码"
            width="120">
            </el-table-column>
            <el-table-column
            prop="usex"
            label="性别"
            width="120">
            
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-popconfirm title="确定删除这一段内容吗？">
                    <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                        slot="reference">删除
                    </el-button>
                </el-popconfirm>
            </template>
            </el-table-column>
        </el-table>
        <div class="wai">
            <div class="nei1">
                <h3 style="font-size:18px;font-weight: bold">收藏信息</h3>    
                <el-table
                    :data="tableData2"
                    style="width: 100%">
                    <el-table-column
                    prop="date"
                    label="收藏日期"
                    width="100">
                    </el-table-column>
                    <el-table-column label="收藏信息">
                    <el-table-column
                        prop="name"
                        label="用户名"
                        width="80">
                    </el-table-column>
                    <el-table-column label="地址">
                        <el-table-column
                        prop="province"
                        label="省份"
                        width="60">
                        </el-table-column>
                        <el-table-column
                        prop="city"
                        label="市区"
                        width="60">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="地址"
                        width="150">
                        </el-table-column>
                        <el-table-column
                        prop="zip"
                        label="邮编"
                        width="60">
                        </el-table-column>
                    </el-table-column>
                    </el-table-column>
                </el-table>
            </div> 
            <div class="nei2">
                <h3 style="font-size:18px;font-weight: bold">足迹信息</h3>
                <el-table
                :data="tableData3"
                style="width: 100%">
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="收藏项">
                    </el-table-column>
                </el-table> 
            </div>
        </div>   
    </div>
</template>

<script>
export default {
  methods: {
    select() {
      if (sessionStorage.getItem("isalogin")) {
        this.axios.get("/user").then(result => {
          console.log(result);
          var results = result.data.result;
          for (var i = 0; i < results.length; i++) {
            if (results[i].usex == null) {
              continue;
            }
            if (results[i].usex == 1) {
              results[i].usex = "男";
            } else {
              results[i].usex = "女";
            }
          }
          this.tableData = results;
        });
      }else{
          this.$message.error('请先登录哦！');
      }
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  },
  data() {
    return {
      tableData: [], //存储用户信息
      usex: "",
      tableData2: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ], //存储收藏信息
      tableData3: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        }
      ] //存储足迹信息
    };
  },
  // mounted() {
  //     this.$socket.emit("weallist",{
  //         aname:this.$store.state.ausername,
  //     })
  // },
};
</script>

<style scoped>
.wai {
  margin-top: 50px;
  display: flex;
  width: 100%;
}
.nei1 {
  width: 50%;
}
.nei2 {
  width: 50%;
}
</style>
